<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>

    <title>个人主页</title>

    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <!-- Main Font -->
    <script src="js/libs/webfontloader.min.js"></script>
    <script>
        WebFont.load({
            google: {
                families: ['Roboto:300,400,500,700:latin']
            }
        });
    </script>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" href="Bootstrap/dist/css/bootstrap-reboot.css">
    <link rel="stylesheet" type="text/css" href="Bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="Bootstrap/dist/css/bootstrap-grid.css">

    <!-- Main Styles CSS -->
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/fonts.min.css">
    <link rel="stylesheet" type="text/css" href="css/xtiper.css">
    <!--MarkDown转HTML-->
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <!--文章标签云-->
    <style>
        .tag-cloud {
            font-size: 10px;
            display: inline-block;
            color: #515365;
            background: #e6ecf5;
            border-radius: 5px;
            padding: 5px;
            margin: 1px;
        }

        .like-active {
            background-color: #ff5e3a !important;
        }

        .like-active-icon {
            fill: #ff5e3a;
        }

        .bigimg {
            width: 600px;
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            display: none;
            z-index: 9999;
            border: 10px solid #fff;
        }
        .line-limit-length {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
        .mask {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: #000;
            opacity: 0.5;
            filter: Alpha(opacity=50);
            z-index: 98;
            transition: all 1s;
            display: none
        }
    </style>
</head>
<body class="page-has-left-panels page-has-right-panels">
<div id="wholeContent">

    <!-- Preloader -->

    <div id="hellopreloader">
        <div class="preloader">
            <svg width="45" height="45" stroke="#fff">
                <g fill="none" fill-rule="evenodd" stroke-width="2" transform="translate(1 1)">
                    <circle cx="22" cy="22" r="6" stroke="none">
                        <animate attributeName="r" begin="1.5s" calcMode="linear" dur="3s" repeatCount="indefinite"
                                 values="6;22"/>
                        <animate attributeName="stroke-opacity" begin="1.5s" calcMode="linear" dur="3s"
                                 repeatCount="indefinite" values="1;0"/>
                        <animate attributeName="stroke-width" begin="1.5s" calcMode="linear" dur="3s"
                                 repeatCount="indefinite" values="2;0"/>
                    </circle>
                    <circle cx="22" cy="22" r="6" stroke="none">
                        <animate attributeName="r" begin="3s" calcMode="linear" dur="3s" repeatCount="indefinite"
                                 values="6;22"/>
                        <animate attributeName="stroke-opacity" begin="3s" calcMode="linear" dur="3s"
                                 repeatCount="indefinite" values="1;0"/>
                        <animate attributeName="stroke-width" begin="3s" calcMode="linear" dur="3s"
                                 repeatCount="indefinite"
                                 values="2;0"/>
                    </circle>
                    <circle cx="22" cy="22" r="8">
                        <animate attributeName="r" begin="0s" calcMode="linear" dur="1.5s" repeatCount="indefinite"
                                 values="6;1;2;3;4;5;6"/>
                    </circle>
                </g>
            </svg>

            <div class="text">Loading ...</div>
        </div>
    </div>

    <!-- ... end Preloader -->


    <!-- Fixed Sidebar Left -->

    <div th:replace="~{leftSidebar :: leftSidebar}"></div>

    <!-- ... end Fixed Sidebar Left -->


    <!-- Fixed Sidebar Left -->


    <!-- ... end Fixed Sidebar Left -->


    <!-- Fixed Sidebar Right -->


    <div th:replace="~{rightSidebar :: rightSiebar}"></div>

    <!-- ... end Fixed Sidebar Right -->


    <!-- Fixed Sidebar Right-Responsive -->

    <!-- ... end Fixed Sidebar Right-Responsive -->


    <!-- Header-BP -->

    <header th:replace="~{header :: header}"></header>

    <!-- ... end Header-BP -->


    <!-- Responsive Header-BP -->


    <!-- ... end Responsive Header-BP -->
    <div class="header-spacer"></div>


    <!-- Top Header-Profile -->
    <!--头部-->
    <div th:replace="~{commonProfileHeader :: header}"></div>

    <!-- ... end Top Header-Profile -->
    <div class="container">
        <div class="row">

            <!-- Main Content -->

            <div class="col col-xl-6 order-xl-2 col-lg-12 order-lg-1 col-md-12 col-sm-12 col-12">
                <div id="newsfeed-items-grid">
                    <div class="ui-block" th:each="article,articleState: ${articles}">
                        <p class="d-none articleId" th:text="${article.article.articleId}"></p>
                        <!-- Post -->
                        <article class="hentry post">
                            <div th:replace="~{profilePageCommon :: profilePagePostHeader}"></div>
                            <h3 th:if="${article.article.articleTitle} ne null"  th:text="${article.article.articleTitle}"></h3>
                            <a th:href="@{/read-article(uId=${article.article.userId},uName=${article.author.userName},
                            aId=${article.article.articleId},title='')}" style="color: black">
                                <p style="text-indent: 2em" class="article-content line-limit-length"
                                   th:text="${article.article.articleContent}">
                                </p>
                               <!-- <script src="js/jQuery/jquery-3.4.1.js"></script>
                                <script>
                                    $(".article-content").each(function () {
                                        $(this).html(delHtmlTag(marked($(this).html())));
                                    });
                                    function delHtmlTag(str){
                                        return str.replace(/<[^>]+>/g,"");//去掉所有的html标记
                                    }
                                </script>-->
                            </a>
                            <div class="row" th:if="${not #strings.isEmpty(article.article.imgPath)}">
                                <div class="col-xs-6 col-md-3 mt-3" th:each="path : ${images[articleState.index]}">
                                    <a href="javascript:void(0)" class="thumbnail">
                                        <img th:src="${path}" class="card-img-top smallimg" alt="..."
                                             style="height: 100%">
                                    </a>
                                </div>
                            </div>

                            <div class="post-additional-info inline-items">

                                <a href="#" class="post-add-icon inline-items"
                                   th:classappend="${whetherLike[articleState.index]} == true ? 'like-active-icon' : '' "
                                   onclick="giveLike(this);return false;">
                                    <svg class="olymp-heart-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-heart-icon"></use>
                                    </svg>
                                    <span th:text="${article.likeCount}"></span>
                                </a>
                                <div class="likeRefresh">
                                    <ul class="friends-harmonic" th:if="${article.likeUserList.size() > 0}">
                                        <div>
                                            <li th:if="${likeState.index <= 5}"
                                                th:each="likeUser, likeState : ${article.likeUserList}">
                                                <a href="#"
                                                   th:href="@{/lookUserProfilePage(userName=${likeUser.userName})}">
                                                    <img th:src="${likeUser.imagePath}" alt="friend">
                                                </a>
                                            </li>
                                        </div>
                                    </ul>

                                    <div class="names-people-likes">
                                        <div th:if="${article.likeUserList.size() > 0}">
                                            <a href="#" th:text="${article.likeUserList.get(0).userName}"
                                               th:href="@{/lookUserProfilePage(userName=${article.likeUserList.get(0).userName})}"></a>
                                            and
                                            <br><span th:text="${article.likeUserList.size()}"></span>
                                            <span>more liked this</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="comments-shared">
                                    <a href="#" class="post-add-icon inline-items"
                                       onclick="showPostComment(this);return false;">
                                        <svg class="olymp-speech-balloon-icon">
                                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-speech-balloon-icon"></use>
                                        </svg>
                                        <span th:text="${article.commentCount}"></span>
                                    </a>

                                    <a href="#" class="post-add-icon inline-items">
                                        <svg class="olymp-share-icon">
                                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-share-icon"></use>
                                        </svg>
                                        <span>0</span>
                                    </a>
                                </div>


                            </div>
                        </article>
                        <!-- .. end Post -->
                        <form class="comment-form inline-items d-none">
                            <div class="post__author author vcard inline-items">
                                <div th:if="${session.loginUser != null}">
                                    <img th:src="${session.loginUser.imagePath}" alt="author">
                                </div>
                                <div class="form-group with-icon-right is-empty">
                                    <textarea class="form-control" placeholder=""></textarea>
                                    <div class="add-options-message">
                                        <a href="#" class="options-message" data-toggle="modal"
                                           data-target="#update-header-photo">
                                            <svg class="olymp-camera-icon">
                                                <use xlink:href="#olymp-camera-icon"></use>
                                            </svg>
                                        </a>
                                    </div>
                                    <span class="material-input"></span></div>
                            </div>
                            <button class="btn btn-md-2 btn-primary" onclick="postComment(this);return false;">
                                发表评论
                            </button>
                            <button class="btn btn-md-2 btn-border-think c-grey btn-transparent custom-color"
                                    onclick="hideComment(this);return false;">
                                取消
                            </button>
                        </form>
                        <!-- Comments -->
                        <ul class="comments-list d-none" th:if="${article.articleComments.size() > 0}">
                            <li class="comment-item" th:each="comment,commentState : ${article.articleComments}">
                                <div class="post__author author vcard inline-items">
                                    <img th:src="${comment.imagePath}" alt="author">

                                    <div class="author-date">
                                        <a class="h6 post__author-name fn"
                                           th:href="@{/lookUserProfilePage(userName=${comment.userName})}"
                                           th:text="${comment.userName}"></a>
                                        <div class="post__date">
                                            <time class="published" datetime="2017-03-24T18:18"
                                                  th:text="${comment.articleComment.commentTime}">
                                            </time>
                                        </div>
                                    </div>

                                    <a href="#" class="more">
                                        <svg class="olymp-three-dots-icon">
                                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                                        </svg>
                                    </a>

                                </div>

                                <p th:text="${comment.articleComment.commentContent}"></p>

                                <a href="#" class="post-add-icon inline-items">
                                    <svg class="olymp-heart-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-heart-icon"></use>
                                    </svg>
                                    <span>8</span>
                                </a>
                                <a href="#" class="reply">Reply</a>

                                <ul class="children" th:if="${comment.childComments.size() > 0}">
                                    <li class="comment-item"
                                        th:each="childComment,childState : ${comment.childComments}">
                                        <div class="post__author author vcard inline-items">
                                            <img th:src="${childComment.imagePath}" alt="author">
                                            <div class="author-date">
                                                <a class="h6 post__author-name fn" href="#"
                                                   th:href="@{/lookUserProfilePage(userName=${childComment.userName})}"
                                                   th:text="${childComment.userName}"></a>
                                                <div th:if="${childComment.toUserName} ne null" style="display: inline-block">
                                                    <span>回复</span>
                                                    <a th:href="@{/lookUserProfilePage(userName=${childComment.toUserName})}"
                                                       th:text="'@'+${childComment.toUserName}"></a>
                                                </div>
                                                <div class="post__date">
                                                    <time class="published" datetime="2017-03-24T18:18"
                                                          th:text="${childComment.articleComment.commentTime}">
                                                    </time>
                                                </div>
                                            </div>

                                            <a href="#" class="more">
                                                <svg class="olymp-three-dots-icon">
                                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                                                </svg>
                                            </a>

                                        </div>

                                        <p th:text="${childComment.articleComment.commentContent}"></p>

                                        <a href="#" class="post-add-icon inline-items">
                                            <svg class="olymp-heart-icon">
                                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-heart-icon"></use>
                                            </svg>
                                            <span>2</span>
                                        </a>
                                        <a href="#" class="reply">Reply</a>
                                    </li>
                                </ul>
                            </li>
                            <a th:href="@{/read-article(uId=${article.article.userId},uName=${article.author.userName},
                            aId=${article.article.articleId},title='')}"
                               class="more-comments" th:if="${article.articleComments.size() > 2}">View more
                                comments <span>+</span></a>
                        </ul>

                        <!-- ... end Comments -->
                    </div>
                </div>
                <p class="d-none" th:text="${visitUser.userName}"></p>
                <a id="load-more-button" href="#" class="btn btn-control btn-more" data-load-link="items-to-load.html"
                   data-container="newsfeed-items-grid" onclick="loadMore(this);return false;">
                    <svg class="olymp-three-dots-icon">
                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                    </svg>
                </a>
            </div>

            <!-- ... end Main Content -->


            <!-- Left Sidebar -->

            <div class="col col-xl-3 order-xl-1 col-lg-6 order-lg-2 col-md-6 col-sm-6 col-12">

                <!--热门文章-->
                <div class="ui-block">
                    <div class="ui-block-title">
                        <h6 class="title">热门文章</h6>
                    </div>
                    <div class="ui-block-content">

                        <!-- W-Personal-Info -->

                        <ul class="widget w-personal-info item-block">
                            <li th:each="article:${famousArticles}" style="margin-top: -20px">
                                <a href="#" style="font-weight: 300" class="h6" th:text="${article.articleTitle}"></a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!--标签云-->
                <div class="ui-block">
                    <div class="ui-block-title">
                        <h6 class="title">标签云</h6>
                    </div>
                    <div class="ui-block-content">
                        <a th:if="${tagS.count >= 6 and tagS.count < 9}" th:each="tagS:${tagToShows}"
                           th:text="${tagS.articleTagName}"
                           style="font-size: 18px"
                           class="tag-cloud" href=""></a>
                        <a th:if="${tagS.count >= 3 and tagS.count < 6}" th:each="tagS:${tagToShows}"
                           th:text="${tagS.articleTagName}"
                           style="font-size: 14px"
                           class="tag-cloud" href=""></a>
                        <a th:if="${tagS.count > 0 and tagS.count < 3}" th:each="tagS:${tagToShows}"
                           th:text="${tagS.articleTagName}"
                           style="font-size: 10px"
                           class="tag-cloud" href=""></a>
                    </div>
                </div>
                <!--分类专栏-->
                <div class="ui-block">
                    <div class="ui-block-title">
                        <h6 class="title">分类专栏</h6>
                    </div>
                    <div class="ui-block-content">
                        <ul class="widget w-personal-info item-block">
                            <li th:each="kindS:${kindToShows}" style="margin-top: -20px;padding: 15px 10px;">
                                <a href="#" style="font-weight: 300" class="h6"
                                   th:text="${kindS.getArticleKindName()}"></a>
                                <span class="float-right" th:text="${kindS.count + '篇'}"></span>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>

            <!-- ... end Left Sidebar -->


            <!-- Right Sidebar -->

            <div class="col col-xl-3 order-xl-3 col-lg-6 order-lg-3 col-md-6 col-sm-6 col-12">

                <!--公告-->
                <div class="ui-block">
                    <div class="ui-block-title">
                        <h6 class="title">公告</h6>
                    </div>
                    <div class="ui-block-content">
                        <div class="text" style="text-indent: 1em">
                            喜欢我写的文章大家可以关注我哦！这是对我最大的鼓励，我将为你创造更加优秀的文章。
                        </div>
                        <hr>
                        <div><img style="width: 100%" src="img/bg-birthdays1.jpg" alt=""></div>
                    </div>
                </div>
                <!--友情链接-->
                <div class="ui-block">
                    <div class="ui-block-title">
                        <h6 class="title">友情链接</h6>
                    </div>
                    <div class="ui-block-content">
                        <ul class="widget w-personal-info item-block">
                            <li style="margin-top: -20px">
                                <a href="#" style="font-weight: 300" class="h6">个人博客</a>
                            </li>
                            <li style="margin-top: -20px">
                                <a href="#" style="font-weight: 300" class="h6">GitHub</a>
                            </li>
                            <li style="margin-top: -20px">
                                <a href="#" style="font-weight: 300" class="h6">简书</a>
                            </li>
                            <li style="margin-top: -20px">
                                <a href="#" style="font-weight: 300" class="h6">公众号</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!--文章归档-->
                <div class="ui-block">
                    <div class="ui-block-title">
                        <h6 class="title">文章归档</h6>
                    </div>
                    <div class="ui-block-content">
                        <ul class="widget w-personal-info item-block">
                            <li th:each="archive:${archives}" style="margin-top: -20px;padding: 15px 10px;">
                                <a href="#" style="font-weight: 300" class="h6" th:text="${archive.date}"></a>
                                <span class="float-right" th:text="${archive.count + '篇'}"></span>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>

            <!-- ... end Right Sidebar -->

        </div>
    </div>
    <img src="" alt="" class="bigimg">
    <div class="mask">
        <img src="img/close1.jpg" alt="" style="background: white;">
    </div>
    <!-- Window-popup Update Header Photo -->

    <div th:replace="~{profilePageModal :: update-header-photo}"></div>
    <div th:replace="~{profilePageModal :: update-user-photo}"></div>

    <!-- ... end Window-popup Update Header Photo -->

    <!-- Window-popup Choose from my Photo -->

    <div class="modal fade" id="choose-from-my-photo" tabindex="-1" role="dialog" aria-labelledby="choose-from-my-photo"
         aria-hidden="true">
        <div class="modal-dialog window-popup choose-from-my-photo" role="document">

            <div class="modal-content">
                <a href="#" class="close icon-close" data-dismiss="modal" aria-label="Close">
                    <svg class="olymp-close-icon">
                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-close-icon"></use>
                    </svg>
                </a>
                <div class="modal-header">
                    <h6 class="title">从我的照片中选择</h6>

                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-expanded="true">
                                <svg class="olymp-photos-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-photos-icon"></use>
                                </svg>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-expanded="false">
                                <svg class="olymp-albums-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-albums-icon"></use>
                                </svg>
                            </a>
                        </li>
                    </ul>
                </div>

                <div class="modal-body">
                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div class="tab-pane active" id="home" role="tabpanel" aria-expanded="true">

                            <div class="choose-photo-item" data-mh="choose-item">
                                <div class="radio">
                                    <label class="custom-radio">
                                        <img src="img/choose-photo1.jpg" alt="photo">
                                        <input type="radio" name="optionsRadios">
                                    </label>
                                </div>
                            </div>
                            <div class="choose-photo-item" data-mh="choose-item">
                                <div class="radio">
                                    <label class="custom-radio">
                                        <img src="img/choose-photo2.jpg" alt="photo">
                                        <input type="radio" name="optionsRadios">
                                    </label>
                                </div>
                            </div>
                            <div class="choose-photo-item" data-mh="choose-item">
                                <div class="radio">
                                    <label class="custom-radio">
                                        <img src="img/choose-photo3.jpg" alt="photo">
                                        <input type="radio" name="optionsRadios">
                                    </label>
                                </div>
                            </div>

                            <div class="choose-photo-item" data-mh="choose-item">
                                <div class="radio">
                                    <label class="custom-radio">
                                        <img src="img/choose-photo4.jpg" alt="photo">
                                        <input type="radio" name="optionsRadios">
                                    </label>
                                </div>
                            </div>
                            <div class="choose-photo-item" data-mh="choose-item">
                                <div class="radio">
                                    <label class="custom-radio">
                                        <img src="img/choose-photo5.jpg" alt="photo">
                                        <input type="radio" name="optionsRadios">
                                    </label>
                                </div>
                            </div>
                            <div class="choose-photo-item" data-mh="choose-item">
                                <div class="radio">
                                    <label class="custom-radio">
                                        <img src="img/choose-photo6.jpg" alt="photo">
                                        <input type="radio" name="optionsRadios">
                                    </label>
                                </div>
                            </div>

                            <div class="choose-photo-item" data-mh="choose-item">
                                <div class="radio">
                                    <label class="custom-radio">
                                        <img src="img/choose-photo7.jpg" alt="photo">
                                        <input type="radio" name="optionsRadios">
                                    </label>
                                </div>
                            </div>
                            <div class="choose-photo-item" data-mh="choose-item">
                                <div class="radio">
                                    <label class="custom-radio">
                                        <img src="img/choose-photo8.jpg" alt="photo">
                                        <input type="radio" name="optionsRadios">
                                    </label>
                                </div>
                            </div>
                            <div class="choose-photo-item" data-mh="choose-item">
                                <div class="radio">
                                    <label class="custom-radio">
                                        <img src="img/choose-photo9.jpg" alt="photo">
                                        <input type="radio" name="optionsRadios">
                                    </label>
                                </div>
                            </div>


                            <a href="#" class="btn btn-secondary btn-lg btn--half-width">取消</a>
                            <a href="#" class="btn btn-primary btn-lg btn--half-width">确认照片</a>

                        </div>
                        <div class="tab-pane" id="profile" role="tabpanel" aria-expanded="false">

                            <div class="choose-photo-item" data-mh="choose-item">
                                <figure>
                                    <img src="img/choose-photo10.jpg" alt="photo">
                                    <figcaption>
                                        <a href="#">South America Vacations</a>
                                        <span>Last Added: 2 hours ago</span>
                                    </figcaption>
                                </figure>
                            </div>
                            <div class="choose-photo-item" data-mh="choose-item">
                                <figure>
                                    <img src="img/choose-photo11.jpg" alt="photo">
                                    <figcaption>
                                        <a href="#">Photoshoot Summer 2016</a>
                                        <span>Last Added: 5 weeks ago</span>
                                    </figcaption>
                                </figure>
                            </div>
                            <div class="choose-photo-item" data-mh="choose-item">
                                <figure>
                                    <img src="img/choose-photo12.jpg" alt="photo">
                                    <figcaption>
                                        <a href="#">Amazing Street Food</a>
                                        <span>Last Added: 6 mins ago</span>
                                    </figcaption>
                                </figure>
                            </div>

                            <div class="choose-photo-item" data-mh="choose-item">
                                <figure>
                                    <img src="img/choose-photo13.jpg" alt="photo">
                                    <figcaption>
                                        <a href="#">Graffity & Street Art</a>
                                        <span>Last Added: 16 hours ago</span>
                                    </figcaption>
                                </figure>
                            </div>
                            <div class="choose-photo-item" data-mh="choose-item">
                                <figure>
                                    <img src="img/choose-photo14.jpg" alt="photo">
                                    <figcaption>
                                        <a href="#">Amazing Landscapes</a>
                                        <span>Last Added: 13 mins ago</span>
                                    </figcaption>
                                </figure>
                            </div>
                            <div class="choose-photo-item" data-mh="choose-item">
                                <figure>
                                    <img src="img/choose-photo15.jpg" alt="photo">
                                    <figcaption>
                                        <a href="#">The Majestic Canyon</a>
                                        <span>Last Added: 57 mins ago</span>
                                    </figcaption>
                                </figure>
                            </div>


                            <a href="#" class="btn btn-secondary btn-lg btn--half-width">Cancel</a>
                            <a href="#" class="btn btn-primary btn-lg disabled btn--half-width">Confirm Photo</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- ... end Window-popup Choose from my Photo -->

    <!-- Playlist Popup -->

    <div class="window-popup playlist-popup" tabindex="-1" role="dialog" aria-labelledby="playlist-popup"
         aria-hidden="true">

        <a href="" class="icon-close js-close-popup">
            <svg class="olymp-close-icon">
                <use xlink:href="svg-icons/sprites/icons.svg#olymp-close-icon"></use>
            </svg>
        </a>

        <div class="mCustomScrollbar">
            <table class="playlist-popup-table">

                <thead>

                <tr>

                    <th class="play">
                        PLAY
                    </th>

                    <th class="cover">
                        COVER
                    </th>

                    <th class="song-artist">
                        SONG AND ARTIST
                    </th>

                    <th class="album">
                        ALBUM
                    </th>

                    <th class="released">
                        RELEASED
                    </th>

                    <th class="duration">
                        DURATION
                    </th>

                    <th class="spotify">
                        GET IT ON SPOTIFY
                    </th>

                    <th class="remove">
                        REMOVE
                    </th>
                </tr>

                </thead>

                <tbody>
                <tr>
                    <td class="play">
                        <a href="#" class="play-icon">
                            <svg class="olymp-music-play-icon-big">
                                <use xlink:href="svg-icons/sprites/icons-music.svg#olymp-music-play-icon-big"></use>
                            </svg>
                        </a>
                    </td>
                    <td class="cover">
                        <div class="playlist-thumb">
                            <img src="img/playlist19.jpg" alt="thumb-composition">
                        </div>
                    </td>
                    <td class="song-artist">
                        <div class="composition">
                            <a href="#" class="composition-name">We Can Be Heroes</a>
                            <a href="#" class="composition-author">Jason Bowie</a>
                        </div>
                    </td>
                    <td class="album">
                        <a href="#" class="album-composition">Ziggy Firedust</a>
                    </td>
                    <td class="released">
                        <div class="release-year">2014</div>
                    </td>
                    <td class="duration">
                        <div class="composition-time">
                            <time class="published" datetime="2017-03-24T18:18">6:17</time>
                        </div>
                    </td>
                    <td class="spotify">
                        <i class="fab fa-spotify composition-icon" aria-hidden="true"></i>
                    </td>
                    <td class="remove">
                        <a href="#" class="remove-icon">
                            <svg class="olymp-close-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-close-icon"></use>
                            </svg>
                        </a>
                    </td>
                </tr>

                <tr>
                    <td class="play">
                        <a href="#" class="play-icon">
                            <svg class="olymp-music-play-icon-big">
                                <use xlink:href="svg-icons/sprites/icons-music.svg#olymp-music-play-icon-big"></use>
                            </svg>
                        </a>
                    </td>
                    <td class="cover">
                        <div class="playlist-thumb">
                            <img src="img/playlist6.jpg" alt="thumb-composition">
                        </div>
                    </td>
                    <td class="song-artist">
                        <div class="composition">
                            <a href="#" class="composition-name">The Past Starts Slow and Ends</a>
                            <a href="#" class="composition-author">System of a Revenge</a>
                        </div>
                    </td>
                    <td class="album">
                        <a href="#" class="album-composition">Wonderize</a>
                    </td>
                    <td class="released">
                        <div class="release-year">2014</div>
                    </td>
                    <td class="duration">
                        <div class="composition-time">
                            <time class="published" datetime="2017-03-24T18:18">6:17</time>
                        </div>
                    </td>
                    <td class="spotify">
                        <i class="fab fa-spotify composition-icon" aria-hidden="true"></i>
                    </td>
                    <td class="remove">
                        <a href="#" class="remove-icon">
                            <svg class="olymp-close-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-close-icon"></use>
                            </svg>
                        </a>
                    </td>
                </tr>

                <tr>
                    <td class="play">
                        <a href="#" class="play-icon">
                            <svg class="olymp-music-play-icon-big">
                                <use xlink:href="svg-icons/sprites/icons-music.svg#olymp-music-play-icon-big"></use>
                            </svg>
                        </a>
                    </td>
                    <td class="cover">
                        <div class="playlist-thumb">
                            <img src="img/playlist7.jpg" alt="thumb-composition">
                        </div>
                    </td>
                    <td class="song-artist">
                        <div class="composition">
                            <a href="#" class="composition-name">The Pretender</a>
                            <a href="#" class="composition-author">Kung Fighters</a>
                        </div>
                    </td>
                    <td class="album">
                        <a href="#" class="album-composition">Warping Lights</a>
                    </td>
                    <td class="released">
                        <div class="release-year">2014</div>
                    </td>
                    <td class="duration">
                        <div class="composition-time">
                            <time class="published" datetime="2017-03-24T18:18">6:17</time>
                        </div>
                    </td>
                    <td class="spotify">
                        <i class="fab fa-spotify composition-icon" aria-hidden="true"></i>
                    </td>
                    <td class="remove">
                        <a href="#" class="remove-icon">
                            <svg class="olymp-close-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-close-icon"></use>
                            </svg>
                        </a>
                    </td>
                </tr>

                <tr>
                    <td class="play">
                        <a href="#" class="play-icon">
                            <svg class="olymp-music-play-icon-big">
                                <use xlink:href="svg-icons/sprites/icons-music.svg#olymp-music-play-icon-big"></use>
                            </svg>
                        </a>
                    </td>
                    <td class="cover">
                        <div class="playlist-thumb">
                            <img src="img/playlist8.jpg" alt="thumb-composition">
                        </div>
                    </td>
                    <td class="song-artist">
                        <div class="composition">
                            <a href="#" class="composition-name">Seven Nation Army</a>
                            <a href="#" class="composition-author">The Black Stripes</a>
                        </div>
                    </td>
                    <td class="album">
                        <a href="#" class="album-composition ">Icky Strung (LIVE at Cube Garden)</a>
                    </td>
                    <td class="released">
                        <div class="release-year">2014</div>
                    </td>
                    <td class="duration">
                        <div class="composition-time">
                            <time class="published" datetime="2017-03-24T18:18">6:17</time>
                        </div>
                    </td>
                    <td class="spotify">
                        <i class="fab fa-spotify composition-icon" aria-hidden="true"></i>
                    </td>
                    <td class="remove">
                        <a href="#" class="remove-icon">
                            <svg class="olymp-close-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-close-icon"></use>
                            </svg>
                        </a>
                    </td>
                </tr>

                <tr>
                    <td class="play">
                        <a href="#" class="play-icon">
                            <svg class="olymp-music-play-icon-big">
                                <use xlink:href="svg-icons/sprites/icons-music.svg#olymp-music-play-icon-big"></use>
                            </svg>
                        </a>
                    </td>
                    <td class="cover">
                        <div class="playlist-thumb">
                            <img src="img/playlist9.jpg" alt="thumb-composition">
                        </div>
                    </td>
                    <td class="song-artist">
                        <div class="composition">
                            <a href="#" class="composition-name">Leap of Faith</a>
                            <a href="#" class="composition-author">Eden Artifact</a>
                        </div>
                    </td>
                    <td class="album">
                        <a href="#" class="album-composition">The Assassins’s Soundtrack</a>
                    </td>
                    <td class="released">
                        <div class="release-year">2014</div>
                    </td>
                    <td class="duration">
                        <div class="composition-time">
                            <time class="published" datetime="2017-03-24T18:18">6:17</time>
                        </div>
                    </td>
                    <td class="spotify">
                        <i class="fab fa-spotify composition-icon" aria-hidden="true"></i>
                    </td>
                    <td class="remove">
                        <a href="#" class="remove-icon">
                            <svg class="olymp-close-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-close-icon"></use>
                            </svg>
                        </a>
                    </td>
                </tr>

                <tr>
                    <td class="play">
                        <a href="#" class="play-icon">
                            <svg class="olymp-music-play-icon-big">
                                <use xlink:href="svg-icons/sprites/icons-music.svg#olymp-music-play-icon-big"></use>
                            </svg>
                        </a>
                    </td>
                    <td class="cover">
                        <div class="playlist-thumb">
                            <img src="img/playlist10.jpg" alt="thumb-composition">
                        </div>
                    </td>
                    <td class="song-artist">
                        <div class="composition">
                            <a href="#" class="composition-name">Killer Queen</a>
                            <a href="#" class="composition-author">Archiduke</a>
                        </div>
                    </td>
                    <td class="album">
                        <a href="#" class="album-composition ">News of the Universe</a>
                    </td>
                    <td class="released">
                        <div class="release-year">2014</div>
                    </td>
                    <td class="duration">
                        <div class="composition-time">
                            <time class="published" datetime="2017-03-24T18:18">6:17</time>
                        </div>
                    </td>
                    <td class="spotify">
                        <i class="fab fa-spotify composition-icon" aria-hidden="true"></i>
                    </td>
                    <td class="remove">
                        <a href="#" class="remove-icon">
                            <svg class="olymp-close-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-close-icon"></use>
                            </svg>
                        </a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

        <audio id="mediaplayer" data-showplaylist="true">
            <source src="mp3/Twice.mp3" title="Track 1" data-poster="track1.png" type="audio/mpeg">
            <source src="mp3/Twice.mp3" title="Track 2" data-poster="track2.png" type="audio/mpeg">
            <source src="mp3/Twice.mp3" title="Track 3" data-poster="track3.png" type="audio/mpeg">
            <source src="mp3/Twice.mp3" title="Track 4" data-poster="track4.png" type="audio/mpeg">
        </audio>

    </div>

    <!-- ... end Playlist Popup -->


    <a class="back-to-top" href="#">
        <img src="svg-icons/back-to-top.svg" alt="arrow" class="back-icon">
    </a>


    <!-- Window-popup-CHAT for responsive min-width: 768px -->
    <!--聊天窗口 -->
    <div th:replace="~{chatCommon :: chatCommon}"></div>
    <div th:replace="~{findFriendModel :: modal}"></div>
    <!-- ... end Window-popup-CHAT for responsive min-width: 768px -->

</div>
<!-- JS Scripts -->
<script src="js/jQuery/jquery-3.4.1.js"></script>
<script src="js/libs/jquery.appear.js"></script>
<script src="js/libs/jquery.mousewheel.js"></script>
<script src="js/libs/perfect-scrollbar.js"></script>
<script src="js/libs/jquery.matchHeight.js"></script>
<script src="js/libs/svgxuse.js"></script>
<script src="js/libs/imagesloaded.pkgd.js"></script>
<script src="js/libs/Headroom.js"></script>
<script src="js/libs/velocity.js"></script>
<script src="js/libs/ScrollMagic.js"></script>
<script src="js/libs/jquery.waypoints.js"></script>
<script src="js/libs/jquery.countTo.js"></script>
<script src="js/libs/popper.min.js"></script>
<script src="js/libs/material.min.js"></script>
<script src="js/libs/bootstrap-select.js"></script>
<script src="js/libs/smooth-scroll.js"></script>
<script src="js/libs/selectize.js"></script>
<script src="js/libs/swiper.jquery.js"></script>
<script src="js/libs/moment.js"></script>
<script src="js/libs/daterangepicker.js"></script>
<script src="js/libs/fullcalendar.js"></script>
<script src="js/libs/isotope.pkgd.js"></script>
<script src="js/libs/ajax-pagination.js"></script>
<script src="js/libs/Chart.js"></script>
<script src="js/libs/chartjs-plugin-deferred.js"></script>
<script src="js/libs/circle-progress.js"></script>
<script src="js/libs/loader.js"></script>
<script src="js/libs/run-chart.js"></script>
<script src="js/libs/jquery.magnific-popup.js"></script>
<script src="js/libs/jquery.gifplayer.js"></script>
<script src="js/libs/mediaelement-and-player.js"></script>
<script src="js/libs/mediaelement-playlist-plugin.min.js"></script>
<script src="js/libs/sticky-sidebar.js"></script>
<script src="js/libs/ion.rangeSlider.js"></script>
<script src="js/common.function.js"></script>
<script src="js/main.js"></script>
<script src="js/libs-init/libs-init.js"></script>
<script defer src="fonts/fontawesome-all.js"></script>
<script src="js/xtiper.min.js"></script>
<script src="Bootstrap/dist/js/bootstrap.bundle.js"></script>

<script src="js/zoom.js"></script>
<div th:replace="~{common :: common}"></div>
<script>
    $(document).on("click", "#header-photo", function () {
        document.getElementById("fileName0").click();
    });
    $(document).on("click", "#user-photo", function () {
        document.getElementById("fileName1").click();
    });
    $("#Timeline").addClass("active");
    $(document).ready(function () {
        /*
        smallimg   // 小图
        bigimg  //点击放大的图片
        mask   //黑色遮罩
        */
        var obj = new zoom('mask', 'bigimg', 'smallimg');
        obj.init();
    });
    $(document).ready(function(){
        $(".article-content").each(function () {
            $(this).html(delHtmlTag(marked($(this).html())));
        });
        function delHtmlTag(str){
            return str.replace(/<[^>]+>/g,"");//去掉所有的html标记
        }
    });

</script>

</body>

</html>